<template>
  <div class="comment">
    <!-- 展示用户评论 -->
    <div class="userComment">
      <h3>
        评论
        <i>共{{ firstCommentTotal }}评论</i>
      </h3>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="说说你的看法吧"
        :maxlength="100"
        show-word-limit
        :clearable="true"
        resize="none"
        v-model="userComment"
      >
      </el-input>
      <el-row
        type="flex"
        style="margin-top: 10px; margin-bottom: 20px"
        justify="end"
      >
        <el-col :span="2.5">
          <el-button size="medium" type="success">发表评论</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 精彩评论 -->
    <div class="hotComment" v-if="hotComments.length !== 0">
      <h3>精彩评论</h3>
      <div
        class="comment_item"
        v-for="(item, index) in hotComments"
        :key="item.commentId"
        :style="{ border: index == hotComments.length - 1 ? 'none' : null }"
      >
        <div class="comment_item_left">
          <!-- 用户头像 -->
          <GlobalImageDeep
            :url="item.user.avatarUrl"
            :imgWidth="38"
            :imgHeight="38"
          />
        </div>
        <div class="comment_item_right">
          <div class="comment_item_right_nickname">
            {{ item.user.nickname }}
          </div>
          <div class="comment_item_right_time">
            {{ formatCommentTime(item.time) }}
          </div>
          <div class="comment_item_right_content">{{ item.content }}</div>
          <!-- 点赞  回复  -->
          <div class="comment_item_right_dianzan">
            <div class="comment_item_right_dianzan_box">
              <i class="iconfont icon-iconfontzhizuobiaozhun023148"></i>
              <span class="comment_item_right_dianzan_count">{{
                item.likedCount
              }}</span>
            </div>
            <!-- <span
              class="comment_item_right_dianzan_reply"
              @click="userReplyOneComment(item)"
            >
              {{ item._replyFlag ? "取消" : "回复" }}
            </span> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 全部评论 -->
    <div class="allComment" v-if="allCommentList.length != 0">
      <h3>全部评论</h3>
      <div
        class="comment_item"
        v-for="(item, index) in allCommentList"
        :key="item.commentId"
        :style="{ border: index == allCommentList.length - 1 ? 'none' : null }"
      >
        <div class="comment_item_left">
          <!-- 用户头像 -->
          <GlobalImageDeep
            :url="item.user.avatarUrl"
            :imgWidth="38"
            :imgHeight="38"
          />
        </div>
        <div class="comment_item_right">
          <div class="comment_item_right_nickname">
            {{ item.user.nickname }}
          </div>
          <div class="comment_item_right_time">
            {{ formatCommentTime(item.time) }}
          </div>
          <div class="comment_item_right_content">{{ item.content }}</div>
          <!-- 点赞  回复  -->
          <div class="comment_item_right_dianzan">
            <div class="comment_item_right_dianzan_box">
              <i class="iconfont icon-iconfontzhizuobiaozhun023148"></i>
              <span class="comment_item_right_dianzan_count">{{
                item.likedCount
              }}</span>
            </div>
            <span
              class="comment_item_right_dianzan_reply"
              @click="userReplyOneComment(item)"
            >
              {{ item._replyFlag ? "取消" : "回复" }}
            </span>
          </div>
          <!-- 用户 要给这个评论 回复 -->
          <div class="comment_item_right_reply" v-if="item._replyFlag">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="说说你的看法吧"
              :maxlength="100"
              show-word-limit
              :clearable="true"
              resize="none"
              v-model="replyComment"
            >
            </el-input>
            <el-row
              type="flex"
              style="margin-top: 10px; margin-bottom: 20px"
              justify="end"
            >
              <el-col :span="2.5">
                <el-button size="medium" type="success">回复</el-button>
                <el-button
                  size="medium"
                  @click="userReplyOneCommentCancel(item)"
                  >取消</el-button
                >
              </el-col>
            </el-row>
          </div>
          <!-- 查看这个评论的 所有回复 -->
          <div
            class="comment_item_right_chakan"
            v-if="item.huifu.length != 0"
            @click="chakanAllChildrenComment(item)"
          >
            查看{{ item.huifu.length }}条回复
          </div>
          <div v-show="item._chakanReplyFlag">
            <div
              class="comment_item_right_allChildrenComment"
              v-for="(ele, index) in item.huifu"
              :key="index"
            >
              <div class="comment_item_left">
                <!-- 用户头像 -->
                <GlobalImageDeep
                  :url="ele.user.avatarUrl"
                  :imgWidth="38"
                  :imgHeight="38"
                />
              </div>
              <div class="comment_item_right">
                <div class="comment_item_right_nickname">
                  {{ ele.user.nickname }}
                </div>
                <div class="comment_item_right_time">
                  {{ formatCommentTime(ele.time) }}
                </div>
                <div class="comment_item_right_content">{{ ele.content }}</div>
                <!-- 点赞  回复  -->
                <div class="comment_item_right_dianzan">
                  <i class="iconfont icon-iconfontzhizuobiaozhun023148"></i>
                  <span class="comment_item_right_dianzan_count">{{
                    ele.likedCount
                  }}</span>
                </div>
                <div class="shouqi" @click="subCommentsUnshow(item)">
                  收起
                  <i class="iconfont icon-shouqi"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="firstCommentTotal"
          :page-size="20"
          @current-change="paginationCurrentChange"
          :current-page="currentPage"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import {
  getAllComment,
  getMvComment,
  getSongComment,
  getAlbumComment,
} from "../../api/commentApi";
import { formattingComments } from "../../utils/format";
export default {
  name: "comment",
  props: {
    id: {
      type: Number,
      required: true,
    },
    // // 资源类型, 0歌曲  1MV 2歌单 3专辑 4电台 5视频 6动态
    type: {
      type: Number,
      default: 2,
    },
  },
  components: {},
  data() {
    return {
      userComment: "", // 用户对整个歌单 评论
      replyComment: "", // 用户回复歌单的某个评论
      // replyFlag: false, // 用户回复歌单的 div 是否展示
      // chakanReplyFlag: false, // 一级评论的 评论
      queryInfo: {
        id: this.id,
        offset: 0,
      }, // 查询 一级评论的参数
      firstCommentTotal: 0,
      currentPage: 1, // 当前页
      allCommentList: [], // 全部评论的列表
      hotComments: [], // 精彩评论的列表
    };
  },
  created() {
    // this.getAllComment();
  },
  watch: {
    id: {
      handler(newId, oldId) {
        if (newId != oldId) {
          this.queryInfo.id = newId;
          this.queryInfo.offset = 0;
          this.currentPage = 1;
          // console.log("当前页码值", this.currentPage);
          this.getAllComment();
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 获取 全部评论
    async getAllComment() {
      try {
        let result;
        // if (this.type === 2) {
        //   result = await getAllComment(this.queryInfo);
        // }
        // console.log(this.type);
        switch (this.type) {
          case 2:
            // 排行榜 、 歌单
            console.log("歌单");
            result = await getAllComment(this.queryInfo);
            break;
          case 1:
            // mv
            console.log("进入mv");
            result = await getMvComment(this.queryInfo);

            break;
          case 0:
            // 歌曲
            console.log("进入 歌曲");
            result = await getSongComment(this.queryInfo);
            break;
          case 3:
            result = await getAlbumComment(this.queryInfo);
          default:
            break;
        }
        // 判断到底是那个 接口
        // if (this.type === 0) {
        //   // 歌曲
        //   result = await getSongComment(this.queryInfo);
        // } else if (this.type === 1) {
        //   // mv
        //   console.log("准备调接口");
        //   result = await getMvComment(this.queryInfo);
        //   console.log(result);
        // } else if (this.type === 2) {
        //   // 榜单
        //   result = await getAllComment(this.queryInfo);
        // }

        if (result.code === 200) {
          console.log("吊起 评论的接口");
          // 处理评论 & 给 一级评论 添加  回复一级评论的 弹框
          let arr = formattingComments(result.comments);
          // console.log("arr", arr);
          arr.forEach((item) => {
            item._replyFlag = false;
            if (item.huifu.length != 0) {
              item._chakanReplyFlag = false;
            }
          });
          this.allCommentList = arr;
          this.firstCommentTotal = result.total;
          console.log("转化完成后的", this.allCommentList);

          // 精彩评论 相关的
          if (result.hotComments.length !== 0) {
            console.log("成功进去精彩");
            this.hotComments = result.hotComments;
          }
        }
      } catch (error) {}
    },
    // 用户 点击 回复 的事件
    userReplyOneComment(item) {
      // 首先关闭 所有 一级评论的  回复
      this.replyComment = "";
      this.allCommentList.forEach((item) => (item._replyFlag = false));

      let index = this.allCommentList.findIndex(
        (i) => i.commentId === item.commentId
      );
      this.allCommentList[index]._replyFlag =
        !this.allCommentList[index]._replyFlag;
    },
    // 用户 点击 回复 div 里面的 取消 回复
    userReplyOneCommentCancel(item) {
      this.replyComment = "";
      let index = this.allCommentList.findIndex(
        (i) => i.commentId === item.commentId
      );
      this.allCommentList[index]._replyFlag =
        !this.allCommentList[index]._replyFlag;
    },
    // 点击 查看  x 条 回复
    chakanAllChildrenComment(item) {
      this.allCommentList.forEach((item) => (item._chakanReplyFlag = false));
      let index = this.allCommentList.findIndex(
        (i) => i.commentId === item.commentId
      );
      this.allCommentList[index]._chakanReplyFlag = true;
    },
    // 点击 查看 x 条 回复 里面的 收起 二级评论
    subCommentsUnshow(item) {
      let index = this.allCommentList.findIndex(
        (i) => i.commentId === item.commentId
      );
      this.allCommentList[index]._chakanReplyFlag = false;
    },
    // 格式化评论的时间
    formatCommentTime(time) {
      return moment(time).fromNow();
    },
    // 改变页码的时候
    paginationCurrentChange(newPage) {
      this.queryInfo.offset = (newPage - 1) * 20;
      this.currentPage = newPage;
      this.$utils.scrollTop(
        document.querySelector(".allComment").offsetTop,
        200
      );
      this.getAllComment();
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.comment {
  /deep/ .el-pager li.active {
    color: #fff;
    background: @globalColor;
    border-radius: 50%;
    &:hover {
      color: #fff;
    }
  }
  /deep/ .el-pager li:hover {
    color: @globalColor;
  }

  /deep/ .el-textarea .el-input__count {
    color: @globalColor;
  }
  /deep/ .el-textarea textarea {
    background-color: #f5f5f5;
    color: #000000;
  }
  /deep/ .el-textarea .el-input__count {
    background-color: #f5f5f5;
  }
  // 用户 输入评论 的版块
  .userComment {
    h3 {
      font-size: 24px;
      font-weight: normal;
      margin-bottom: 10px;
      i {
        font-size: 14px;
        margin-left: 12px;
        color: #999999;
      }
    }
  }

  // 精彩评论的板块
  .hotComment,
  .allComment {
    padding-bottom: 20px;
    h3 {
      font-size: 18px;
      font-weight: normal;
      padding-bottom: 10px;
      border-bottom: 1px solid;
      border-color: #ededed;
    }
  }
  // 每一个评论的 class
  .comment_item {
    display: flex;
    padding: 15px 10px 10px;
    border-bottom: 1px solid #ededed;
    .comment_item_left {
      width: 60px;
      /deep/ .el-image img {
        border-radius: 50%;
      }
    }
    .comment_item_right {
      flex: 1;
      .comment_item_right_nickname,
      .comment_item_right_time {
        color: #999999;
      }
      .comment_item_right_nickname {
        margin-bottom: 5px;
        &:hover {
          color: @globalColor;
          cursor: pointer;
        }
      }
      .comment_item_right_content {
        margin: 10px 0;
        padding-left: 10px;
      }
      .comment_item_right_dianzan {
        .comment_item_right_dianzan_box {
          display: inline-block;
          &:hover {
            color: @globalColor;
            cursor: pointer;
          }
        }
        .comment_item_right_dianzan_count {
          color: #333333;
          margin-left: 4px;
        }
        .comment_item_right_dianzan_reply {
          color: #999999;
          margin-left: 10px;
          cursor: pointer;
          &:hover {
            color: @globalColor;
            cursor: pointer;
          }
        }
      }
      // 用户要给 这个评论  回复 的 class
      .comment_item_right_reply {
        padding: 10px 0;
        &:hover {
          color: @globalColor;
          cursor: pointer;
        }
      }
      .comment_item_right_chakan {
        margin: 10px 0;
        color: #999999;
        cursor: pointer;
        &:hover {
          color: @globalColor;
          cursor: pointer;
        }
      }
      // 一级评论的 回复 盒子
      .comment_item_right_allChildrenComment {
        display: flex;
        padding: 10px;
        background-color: #f2f2f2;
        border-radius: 4px;
        .shouqi {
          color: #999999;
          margin-top: 5px;
          cursor: pointer;
          &:hover {
            color: @globalColor;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
